//-------------------------------------------------------------------------------------
// Sass burger (https://github.com/jorenvanhee/sass-burger)
// Copyright 2016 Joren Van Hee
// Licensed under MIT (http://joren.mit-license.org/)
//-------------------------------------------------------------------------------------

// Burger parts
//
// (---) top    -> &::before
// [---] middle -> &
// (---) bottom -> &::after

/// Burger
/// @param {number} $width  [30px] - 宽度
/// @param {number} $height  [5px] - 高度
/// @param {Number} $gutter  [3px] - 间距
/// @param {string} $color  [#000] - 线条颜色
/// @param {number} $border-radius  [0] - 圆角
/// @param {number} $transition-duration  [0] - 动效持续时间
/// @example
/// //SCSS
/// .burger {
///  @include burger;
/// }
/// //Output CSS
/// .burger {
///  position: relative;
///  margin-top: 8px;
///  margin-bottom: 8px;
///  user-select: none;
/// }
/// .burger, .burger::before, .burger::after {
///   display: block;
///   width: 30px;
///   height: 5px;
///   background-color: #000;
///   outline: 1px solid transparent;
///   transition-property: background-color, transform;
///   transition-duration: 0.3s;
/// }
/// .burger::before, .burger::after {
///   position: absolute;
///   content: "";
/// }
/// .burger::before {
///   top: -8px;
/// }
/// .burger::after {
///   top: 8px;
/// }
/// @author Joren Van Hee
@mixin burger(
  $width: 30px,
  $height: 5px,
  $gutter: 3px,
  $color: #000,
  $border-radius: 0,
  $transition-duration: 0.3s
) {
  $burger-height: $height !global;
  $burger-gutter: $gutter !global;

  position: relative;
  margin-top: $height + $gutter;
  margin-bottom: $height + $gutter;

  user-select: none;

  // 1. Fixes jagged edges in Firefox, see issue #10.
  &,
  &::before,
  &::after {
    display: block;
    width: $width;
    height: $height;
    background-color: $color;
    outline: 1px solid transparent; // 1
    @if $border-radius != 0 {
      border-radius: $border-radius;
    }

    transition-property: background-color, transform;
    transition-duration: $transition-duration;
  }

  &::before,
  &::after {
    position: absolute;
    content: '';
  }

  &::before {
    top: -($height + $gutter);
  }

  &::after {
    top: $height + $gutter;
  }
}

/// Select parts of the burger
/// @example
/// //SCSS
/// .burger {
///  @include burger-top {
///    background-color: red;
///  }
/// }
/// //Output CSS
/// .burger,
/// .burger::before,
/// .burger::after {
///  background-color: red;
/// }
@mixin burger-parts {
  &,
  &::before,
  &::after {
    @content;
  }
}

/// @example
/// //SCSS
/// .burger {
///  @include burger-top {
///    background-color: red;
///  }
/// }
/// //Output CSS
/// .burger::before {
///  background-color: red;
/// }
@mixin burger-top {
  &::before {
    @content;
  }
}
/// @example
/// //SCSS
/// .burger {
///  @include burger-middle {
///    background-color: red;
///  }
/// }
/// //Output CSS
/// .burger {
///  background-color: red;
/// }
@mixin burger-middle {
  & {
    @content;
  }
}
/// @example
/// //SCSS
/// .burger {
///  @include burger-bottom {
///    background-color: red;
///  }
/// }
/// //Output CSS
/// .burger::after {
///  background-color: red;
/// }
@mixin burger-bottom {
  &::after {
    @content;
  }
}

/// Burger animations
/// @param {String} $color - auto
@mixin burger-to-cross($color: auto) {
  & {
    background-color: transparent;
  }
  @if ($color != auto) {
    &::before,
    &::after {
      background-color: $color;
    }
  }
  &::before {
    transform: translateY($burger-gutter + $burger-height) rotate(45deg);
  }
  &::after {
    transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
  }
}
